/* 
  本仓库未使用采用了 自定义事件实现Category->Attr组件的通信
*/

// 引入分类的接口方法
import { reqC1, reqC2, reqC3 } from '@/api/product/attr/index'
import { ref } from 'vue'
import { defineStore } from 'pinia'

// 商品分类全局分组件的小仓库
const useCategoryStore = defineStore('category', () => {
  // 存储一级分类的数据
  const c1Arr = ref<any>([])
  // 存储二级分类的数据
  const c2Arr = ref<any>([])
  // 存储三级分类的数据
  const c3Arr = ref<any>([])
  // 收集一级分类选择商品的id
  let c1Id = ref<number>()
  // 收集二级分类选择商品的id
  let c2Id = ref<number>()
  // 收集三级分类选择商品的id
  let c3Id = ref<number>()

  // 获取一级分类数据的方法
  const getC1 = async () => {
    const result = await reqC1()
    if (result.code === 200) {
      c1Arr.value = result.data
    }
  }
  // 获取二级分类数据的方法
  const getC2 = async () => {
    // 先清空原有的数据
    c1Clear()
    const result = await reqC2(c1Id.value as number)
    if (result.code === 200) {
      c2Arr.value = result.data
    }
  }
  // 获取三级分类数据的方法
  const getC3 = async () => {
    // 先清空原有的数据
    c2Clear()
    const result = await reqC3(c2Id.value as number)
    if (result.code === 200) {
      c3Arr.value = result.data
    }
  }
  // 点击第一个选择框清空按钮后的回调
  const c1Clear = () => {
    // clearable 只清空当前组件已选择的数据
    c2Arr.value = []
    c3Arr.value = []
    c2Id.value = undefined
    c3Id.value = undefined
  }
  // 点击第二个选择框清空按钮后的回调
  const c2Clear = () => {
    c3Arr.value = []
    c3Id.value = undefined
  }
  return {
    c1Arr,
    c2Arr,
    c3Arr,
    c1Id,
    c2Id,
    c3Id,
    getC1,
    getC2,
    getC3,
    c1Clear,
    c2Clear,
  }
})

export default useCategoryStore
